<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom :bgColor="bgColor" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">报工</block>
				<view slot="right" @tap="saveData">提交</view>
			</cu-custom>
			<view class="header">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
					<view class='cuIcon-search'></view>
					<input v-model="searchText" confirm-type="search" @confirm="onInput" focus="true" class="input" type="text" autofocus="autofocus"
					 placeholder="扫描或输入条码" />
					<view class='cuIcon-scan' @tap="scanCode"  style="transform: scale(1.6,1.6);color: #c6c6c6;"></view>
				</view>
			</view>

			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-card dynamic" v-for="(item,index) in dcPreceWorkReportItemList" :key="index">
					<view class="cu-item shadow" :style="{'background-color':color===1?'#3bade3':'#f37b1d'}">
						<view class="text-content">
							型体：{{item.xingti==null?'':item.xingti}}
						</view>
						<view class="text-content">
							颜色：{{item.colorName==null?'':item.colorName}}
						</view>
						<view class="text-content">
							尺码：{{item.size==null?'':item.size}}
						</view>
						<view class="text-content">
							数量：{{item.gmnga==null?'':item.gmnga}}
						</view>
						<view class="text-content">
							<view class="num">不合格数：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.xmnga" name="xmnga" />
						</view>
						<view class="text-content">
							工序：{{item.ltxa1Name==null?'':item.ltxa1Name}}
						</view>
						<view class="text-content">
							部件：{{item.buweiName==null?'':item.buweiName}}
						</view>
					</view>
				</view>
			</form>
		</scroll-view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import api from '@/api/api.js'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				title: '下拉刷新 + 加载更多',
				data: [],
				dcPreceWorkReportItemList: [],
				barcodeMap: new Map(),
				array: [],
				index: 0,
				pageNo: 1,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				date: new Date().toISOString().slice(0, 10),
				searchText: "",
				filterText: '',
				code: '',
				imageList: [],
				personnelList: [],
				createBy: '',
				color: 0,
				bgColor: 'bg-green',
				order:{}
			};
		},

		onShow() {
			this.createBy = uni.getStorageSync('login_user_info').username
			this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
			let pages = getCurrentPages();
			this.getWorkByWorkNo();
		},
		onUnload() {
			this.max = 0,
				this.dcPreceWorkReportItemList = [],
				this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				return;
			}
			this.showLoadMore = true;
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			getWorkByWorkNo(){
				this.personnelList=[]
				let that = this;
				let url = '/dcloud/confirmation/confirmation/getWorkByWorkNo'
				this.$http.get(url, {
					params: {
						"workNo":this.createBy,
					},
				}).then(res => {
					if (res.data.success && res.data.result.length > 0) {
						that.personnelList = res.data.result
					}
				}).catch(err => {
					console.log(err);
				});
			},
			onInput(e) {
				let barcode = e.detail.value
				let beanch = e.detail.value.split('|')
				if (this.barcodeMap.get(barcode)) {
					this.searchText = ""
					this.$tip.toast('条码已扫描')
					return;
				}
				let that = this;
				let url = '/dcloud/dcDispatchOrder/dcDispatchOrder/PieceWorkVo'
				this.$http.post(url, {
					id: beanch[0],
					itemId:beanch[1],
					bujianId: beanch[2]
				}).then(res => {
					if (res.data.success && res.data.result.length > 0) {
						let item = {
							barcode: barcode,
							dispatchNo: res.data.result[0].dispatchNo,
							aufnr: res.data.result[0].aufnr,
							kdauf: res.data.result[0].kdauf,
							itemNo: res.data.result[0].itemNo,
							matnr: res.data.result[0].matnr,
							maktx: res.data.result[0].maktx,
							color: res.data.result[0].color,
							colorName: res.data.result[0].colorName,
							size: res.data.result[0].size,
							sizeName: res.data.result[0].sizeName,
							gmnga: res.data.result[0].sgamng,
							xmnga: '',
							ltxa1: res.data.result[0].ltxa1,
							ltxa1Name: res.data.result[0].ltxa1Name,
							buwei: res.data.result[0].buwei,
							buweiName: res.data.result[0].buweiName,
							xingti: res.data.result[0].xingti,
						}
						that.dcPreceWorkReportItemList.push(item);
						that.barcodeMap.set(barcode, barcode);
						this.searchText = ""
						if (this.color == 0) {
							this.color = 1
							this.bgColor = 'bg-green'
						} else {
							this.color = 0
							this.bgColor = 'bg-orange'
						}
					} else {
						this.$tip.toast('条码不存在或已完工')
						this.searchText = ""
					}
				}).catch(err => {
					console.log(err);
					this.searchText = ""
				});
			},
			initData() {
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 300);
			},
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						that.searchText = res.result;
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},

			saveData() {
				if (this.dcPreceWorkReportItemList.length == 0) {
					this.$tip.alert('没有扫描数据');
					return;
				}
				this.personnelList[0].buwei = this.dcPreceWorkReportItemList[0].buwei
				this.personnelList[0].buweiName = this.dcPreceWorkReportItemList[0].buweiName
				this.personnelList[0].operationCode = this.dcPreceWorkReportItemList[0].ltxa1
				this.personnelList[0].operationName = this.dcPreceWorkReportItemList[0].ltxa1Name
				let url = '/dcloud/confirmation/confirmation/scanSubmit'
				this.$http.post(url, {
						dcPreceWorkReportItemList: this.dcPreceWorkReportItemList,
						personnelList: this.personnelList,
						confType: 1,
						budat:new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
				}).then(res => {
					if (res.data.success) {
						if (res.statusCode == "200") {
							uni.showToast({
								title: '保存成功'
							});
							this.searchText = ""
							this.dcPreceWorkReportItemList = []
							this.barcodeMap = new Map()
						}
					}else{
						this.$tip.toast(res.data.message);
					}
				}).catch(err => {
					console.log(err);
				});

			}

		}
	}
</script>
<style>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}


	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.cu-card>.cu-item {
		margin-bottom: 5px;
		margin-top: 10px;
	}

	.cu-card.dynamic>.cu-item>.text-content {
		margin-bottom: 1px;
		margin-top: 6px;
	}

	.date {
		height: 260rpx;
		text-align: center;
		background-color: #0081ff;
		color: #FFFFFF;
		word-break: break-all;
		margin-top: -1px;
	}

	.text {
		margin-top: 10rpx;
		word-break: break-all;
		color: #FFFFFF;
	}

	.baogong {
		margin-top: 6px;
		margin-botton: 6px;
		text-align: center;
		display: block;
		margin: 0 auto;
	}

	.mini-btn {
		text-align: center;
		border-radius: 15rpx;
		width: 200rpx;
		height: 70rpx;
		background-color: #0081ff;
		color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	.num {
		float: left;
		width: 90px;
	}

	.numinput {
		border-bottom: 1px solid gray;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<style lang="scss">
	.uni-input {
		margin-bottom: -10upx;
	}
	.picker {
		text-align: right;
	}

</style>
